<template>
  <el-dialog class="dia" :title="`${form.labelName}`" v-model="visible" :close-on-click-modal="false" draggable>
    <div  class="pre" :style="{backgroundColor: form.color}">
      {{ form.labelName }}
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="PreviewDialog">
import { ref } from 'vue';

// 定义变量内容
const visible = ref(false);
const form = ref({
  labelName: '',
  color: '',
});

// 打开弹窗
const openDialog = (row: any) => {
  visible.value = true;
  form.value = {
    labelName: row.labelName,
    color: row.color,
  };
};

// 暴露变量
defineExpose({
  openDialog
});
</script>

<style scoped lang="scss">
.dia{

}
.pre {
  display: flex;
  justify-content: center;
  //align-items: center;
  text-align: center;
  width: 25%;
  padding: 20px;
  margin-left: 35%;
  color:#ffffff;
}
</style>
